import { FC, useState } from "react"
import { connect } from "react-redux"
import ReactPaginate from 'react-paginate'
import { useTranslation } from 'react-i18next'
import { Input } from 'antd-mobile'
import arrow from '@/assets/images/market/bottom-arrow.png'
import cardImg from '@/assets/images/market/market-card.png'
import beans from '@/assets/images/market/beans.png'
import pandas from '@/assets/images/market/pandas.png'
import expanded from '@/assets/images/market/expanded.png'
import wassies from '@/assets/images/market/wassies.png'
import azuki from '@/assets/images/market/azuki.png'
import kanpai from '@/assets/images/market/kanpai.png'
import otherdeed from '@/assets/images/market/otherdeed.png'
import wassiesby from '@/assets/images/market/wassiesby.png'
import azukibeans from '@/assets/images/market/azukibeans.png'


interface ICardItem {}

const CardItem: FC<ICardItem> = () => {


    const { t } = useTranslation()
    const [ activeTab, setActiveTab ] = useState(-1)
    const [ cardList ] = useState([
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: cardImg
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: cardImg
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: cardImg
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: beans
        },
        {
            name: 'Kanpai Pandas',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: pandas
        },
        {
            name: 'Otherdeed Expanded',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: expanded
        },
        {
            name: 'Wassies by Wassies',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: wassies
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: azuki
        },
        {
            name: 'Kanpai Pandas',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: kanpai
        },
        {
            name: 'Otherdeed Expanded',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: otherdeed
        },
        {
            name: 'Wassies by Wassies',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: wassiesby
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            img: azukibeans
        },
    ])

	return (
        <>
            <div className="market-card-box">
                {
                    cardList.map((item, index) => (
                        <div onClick={() => setActiveTab(index)} className={`card-item ${activeTab === index ? 'active' : ''}`} key={index}>
                            <img src={item.img} alt="" />
                            <p className="card-name">{item.name}</p>
                            <div className="flex">
                                <div className="card-floor">
                                    <span className="card-title">{t(`market.${item.floorName}`)}</span>
                                    <span className="card-floor-price">{item.floor}</span>
                                </div>
                                <div className="card-total">
                                    <span className="card-title">{t(`market.${item.totalName}`)}</span>
                                    <span className="card-total-price">{item.total}</span>
                                </div>
                            </div>
                            <div className="card-hover-mask">
                                <div className="my-sale-assets">
                                    <div className="selling-price">
                                        <p className="selling-title">{t('market.selling')}</p>
                                        <p className="selling-amount">
                                            <Input defaultValue="99.5" />
                                        </p>
                                        <div className="sale-coin flex-between">
                                            <span>SUI</span>
                                            <img src={arrow} alt="" />
                                        </div>
                                    </div>
                                    <div className="card-cancel-sale btn">{t('market.cardBtn5')}</div>
                                    <div onClick={e => {
                                        e.stopPropagation()
                                        setActiveTab(-1)
                                    }} className="card-cancel btn">{t('market.cardBtn4')}</div>
                                </div>
                            </div>
                        </div>
                    ))
                }
            </div>
            <div className="market-pagination">
                <ReactPaginate
                    breakLabel="..."
                    nextLabel="next Page >"
                    // onPageChange={handlePageClick}
                    pageRangeDisplayed={1}
                    className="paginate-market"
                    pageLinkClassName="link-a"
                    pageCount={33}
                    previousLabel="<"
                    renderOnZeroPageCount={null}
                />
            </div>
        </>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(CardItem)